<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="/thor-toolkit" prefix="tt" %>
<!DOCTYPE html>
<html>
<head>
	<tt:env/>
    <title>对标管理平台</title>
    <meta charset="utf-8">
    <%@include file="../common-include.jspf"%>
    <style>
        .left-div{
            background-color:#C8C9CB;
            text-align:center;
        }
        .left-div-title{
            font-size:20px;
        }
        .link1{
            color:#555;
            cursor:pointer;
            text-decoration: underline;
        }
        .link1:hover{
            color:#007ded;
        }
        .tui-grid-line .link1{
            color:#555;
        }
        .tui-grid .tui-grid-line-selected .tui-grid-cell .tui-grid-cell-content .link1{
            color:#555;
        }
        .tui-grid-line-selected .tui-grid-cell .tui-grid-cell-content .link1{
            color:#fff;
        }
        .select-input{
        	width:300px;
        }
    </style>
    
    <script>
        var grid;
        $(function(){
            tui.ctrl.button("experComment").checked(true);
            
            //query comments
            queryForm=tui.ctrl.form("queryCommentsForm");
            
            tui.ctrl.button("runBtn").on("click",function(data){
            	queryForm.submit();
            });
            
            queryForm.on("receive", function(data){
           		tui.ctrl.paginator("pageBtn").totalSize(data.length);
           		grid.data(data);
           	});
            
            //add comment
            var sectionSelectData=tui.ctrl.input("sectionData");
    		var kpiSelectData=tui.ctrl.input("kpiData");
            tui.ctrl.button("newCommentBtn").on("click",function(){
            	var dlg = tui.ctrl.dialog();
            	var diaSection;
            	var diaKpi;
            	dlg.on("open",function(){
            		diaSection=tui.ctrl.input("diaSectionSelect");
                    diaKpi=tui.ctrl.input("diaKpiSelect");
            		diaSection.data(sectionSelectData.data());
            		//diaKpi.data(kpiSelectData.data());
            		var form=tui.ctrl.form("getKpiForm");
            		diaSection.on("select",function(data){
            			form.immediateValue({sectionId:data.item.key});
            			form.submit();
            			diaKpi.value(null);
            			form.on("receive",function(data){
            				diaKpi.data(data);
            			});
            		});
            	});
                dlg.showResource("editCommentsHtml","新建专家意见",
                    [
                       {name:"保存", func: function(){
                    	   var fm=tui.ctrl.form("addCommentsForm");
                    	   var proc = function() {
                               dlg.close();
                               fm.off("success", proc);
                           };
                           fm.immediateValue({KPI:diaKpi.value(),comments:tui.ctrl.textarea("commentText").value()});
                           fm.submitForm("queryCommentsForm");
                           fm.submit();
                           fm.on("success",proc);
                       }},
                       {name:"取消", func: function(){
                           dlg.close();
                       }},
                 	]);           	
            });
            
            grid= tui.ctrl.grid("commentGrid");
            grid.columns([{ key: 'checked', format: tui.ctrl.Grid.checkbox(),width:30 ,fixed: true},
                          { name: '指标', key:'FiledName' },
                          { name: '意见', key: 'Comments' },
                          { name: '最后编辑', key: 'lastEditUser'}
                         ]);
            
            var gridMenu=[
					  {key: 'view', value: '查看'},   
                      {key: 'contract', value: '联系人信息'}];
            
            grid.on("rowcontextmenu",function(data){
          	  	var m=tui.ctrl.menu(gridMenu);
          	  	var item=grid.activeItem();
              	m.show({x: data.event.clientX, y: data.event.clientY}, "rT");
              	m.on("select",function(data){
              		var checked=data.item.key;
              		if(checked==="view"){
              			var v=1;
              			editComment(item,v);
              		}
              		if(checked==="edit"){
              			editComment(item);
              		}
					if(checked==="contract"){
						if(item[8]){
							getUserInfo(item[8]);
						}else{
							tui.infobox("此条目无联系人信息","无联系人");
						}
              		}
					if(checked==="delete"){
						var arr=[];
						arr.push(item[1]);
						deleteComments(arr);
					}
              	});
              	return tui.cancelDefault(data.event);
             });
            
            grid.on("rowdblclick",function(data){
            	var item=grid.activeItem();
            	editComment(item,1);
            });
            //modify comment
            function editComment(item,v){
            	var dlg = tui.ctrl.dialog();
            	var textarea;
            	dlg.on("open",function(){
            		var sec=tui.ctrl.input("diaSectionSelect");
            		sec.data([{"key":item[6],"value":item[7]}]);
            		sec.value(item[6]);
            		sec.readonly(true);
            		
            		var kpi=tui.ctrl.input("diaKpiSelect");
            		kpi.data([{key:item[3],value:item[4]}]);
            		kpi.value(item[3]);
            		kpi.readonly(true);
            		
            		textarea=tui.ctrl.textarea("commentText");
            		textarea.value(item[5]);
            		textarea.form("modifyCommentForm");
            		if(v==1){
            			textarea.readonly(true);
            		}
            	});
            	var allBtn=[{name:"取消", func: function(){dlg.close();}}];
            	var saveBtn={name:"保存", func: function(){
             	   var fm=tui.ctrl.form();
            	   if (item[5]!==textarea.value()){
                	   fm.id("modifyCommentForm");
                	   fm.action("${root}/api/modifyExpertComments.do");
                	   fm.immediateValue({commentId:item[1],comments:tui.ctrl.textarea("commentText").value()});
                	   
                	   fm.submit();
                	   fm.submitForm("queryCommentsForm");
            	   }else{
            		   dlg.close();
            	   }
            	   var proc = function() {
                       dlg.close();
                       fm.off("success", proc);
                   };
                   fm.once("success",proc);
                }};
            	var text;
            	if(v!=1){
            		allBtn.push(saveBtn);
            		text="编辑专家意见";
            	}else{
            		text="查看专家意见";
            	}
                dlg.showResource("editCommentsHtml",text,allBtn); 
            };
            
            //delete coment function 
            function deleteComments(ids){
				var fm=tui.ctrl.form();    
				fm.id("delCommentsForm");
				fm.action("${root}/api/deleteExpertComments.do");
				fm.immediateValue({id:ids});
				fm.submitForm("queryCommentsForm");
				tui.askbox("确认删除?","确认删除",function(result){
            		if(result){
            			fm.submit();
            		}
            	});
            }
            
            //delete multiple comments
            var delBtn=tui.ctrl.button("delCommentBtn");
            delBtn.on("click",function(data){
            	var dt = grid.data();
            	var arr=[];
            	for (var i = 0; i < dt.length(); i++) {
            		if (dt.at(i)[0] == true) {
            			arr.push(dt.cell(i,"ID"));
            		}
            	}
            	if(arr.length===0){
            		tui.infobox("请选择要删除的条目");
            	}else{
            		deleteComments(arr);
            	}
            });
            tui.ctrl.paginator("pageBtn").on("change",function(){
            	queryForm.submit();
            });
           // queryForm.submit();
            queryForm.once("success",function(){
            	ifExist();
            });
            function ifExist(){
            	for(var i=0;i<pointsData.length;i++){
            		a=(pointsData[i]=="manageExperComment");
                	if(pointsData[i]=="manageExperComment"){
                   		gridMenu.push( {key: 'edit', value: '编辑'},
                                {key: 'delete', value: '删除'});
                    }
                }
            }
        });
    </script>
	<!-- dialog Content -->
    <script id="editCommentsHtml" type="text/html">
		<div style="padding:0 20px;width:400px;text-align:center">
			<table border="0" colspacing="0" colspading="0" align="center">
				<tr>
					<td>板块：</td>
					<td><span id="diaSectionSelect" class="tui-input select-input"  data-type="select" data-validator= "{'*any':'请选择版块'}" data-form="addCommentsForm"></span>
					</td>
				</tr>
				<tr>
					<td>指标：</td>
					<td><span id="diaKpiSelect" class="tui-input select-input" data-type="select" data-validator= "{'*any':'请选择指标'}" data-form="addCommentsForm"></span>
					</td>
				</tr>
				<tr>
					<td style="vertical-align: top; padding-top: 10px;">意见：</td>
					<td>
						<span id="commentText" class="tui-textarea select-input" data-validator= "{'*any':'请填写意见'}" data-form="addCommentsForm"></span>
					</td>

				</tr>
			</table>
		</div>
    </script>
</head>

<body>
	<%@include file="../main-common-include.jspf"%>
    <%@include file="../common-header.jspf"%>
    
    <!---左侧筛选栏--->
    <div class="contDiv">
    	<p class="left-div-title">专家意见库筛选</p>
        <div>
           板块：<span id="sectionSelect" class="tui-input"  data-placeholder="选择板块" data-type="select" data-clearable="true"></span>
        </div>
        <div>
            指标：<span id="kpiSelect" class="tui-input"  data-placeholder="选择指标" data-type="multi-select"></span>
        </div>
        <span id="comSelect" class="tui-input" style="display:none" ></span>
	    <a id="runBtn" class="tui-button run-btn">运行</a>
    </div>
    <div class="left-div left-body"></div>

    <!---右侧--->
    <div class="right-body">
        <div id="manageExperComment" style="display:none;float:right;">
            <a id="newCommentBtn" class="tui-button tui-primary" >新建条目</a>
            <a id="delCommentBtn" class="tui-button tui-default">删除条目</a>
        </div>
        <div style="clear:both"></div>
        <div id="commentGrid" class="tui-grid"
          data-resizable="true"
          data-rowselectable="true"
          style="width:100%;height:510px;margin-top:10px"></div>
        <div style="clear:both;margin-bottom:10px"></div>
        <div id="pageBtn" style="float:right;" class="tui-paginator" data-page-size="10" data-max-buttons="3" data-submit-form="queryCommentsForm"></div>
    </div>
</body>

<span id="queryCommentsForm" class="tui-form" data-action="${root}/api/queryExpertComments.do" data-waiting="正在加载,请稍后..." >
	<span id="sectionsAgent" data-field="sections" data-target="sectionData" ></span>
	<span data-field="sectionId" data-target="sectionSelect"></span>
	<span data-field="KPIs" data-target="kpiSelect"></span>
	<span data-field="page" data-target="pageBtn" ></span>
</span>
<span id="addCommentsForm" class="tui-form" data-action="${root}/api/addExpertComments.do"></span>
</html>
